<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1437112_e8nfviri4c4.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1438060_ob992ttlg1.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1438081_l8g61gv0ta.css">
    <link rel="stylesheet" href="css/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/layui/font">
    <title>背景</title>
    <style>
        #wrap {
            width: 100%;
            min-width: 1600px;
        }

        ul {
            width: 16%;
            height: 100vh;
            background: #20222a;
            color: #ccc;
            float: left;
            position: relative;
        }

        ul li,
        #bottom div {
            box-sizing: border-box;
            width: 100%;
            height: 8.9vh;
            font: 18px/8.9vh "simhei";
            padding-left: 17%;
            position: relative;
            cursor: pointer;
            display: none;
        }
        #bottom div{
            display: block;
        }
        ul li p,
        #bottom div p {
            position: absolute;
            left: 0px;
            height: 100%;
            background: #3c9688;
            width: 3%;
            display: none;
        }
        ul li:nth-of-type(1) {
            padding-left: 0;
            width: 100%;
            background: #f5f7fa url("./img/logo.png")center center no-repeat;
            background-size: 50%;
            display: block;
        }

        ul li:nth-of-type(2) {
            display: block;
        }

        ul li:nth-of-type(7) {
            position: absolute;
        }

        #bottom {
            display: none;
            height: 35.6vh;
        }

        #top {
            width: 84%;
            height: 8.9vh;
            float: left;
            font: 16px/8.9vh "simhei";
        }

        .right {
            float: right;
            width: 15%;
            display: flex;
            justify-content: space-around;
        }

        .right span {
            width: 50%;
            text-align: center;
        }

        iframe {
            width: 84%;
            height: 91.1vh;
            overflow: scroll;
            float: left;
        }
        #sanjiao{
            margin-left:20%;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <ul>
            <li id="a0"></li>
            <li id="one">
                <p></p><span class="icon iconfont icon-shouye"></span>首页
            </li>
            <li class="chuxian" id="two">
                <p></p> <span class="fa fa-mortar-board"></span>院校管理
            </li>
            <li class="chuxian" id="five">
                <p></p><span class="fa fa-mortar-board"></span>学生管理
            </li>
            <li class="chuxian" id="three">
                <p></p><span class="icon iconfont icon-xueshengguanli"></span> 业绩管理
            </li>
            <li class="chuxian" id="midle">
                <p></p><span class="icon iconfont icon-yejiguanli"></span> 数据分析
                <i class="layui-icon layui-icon-down" id="sanjiao"></i>
            </li>
            <div id="bottom">
                <div id="one1">
                    <p></p>市场统计
                </div>
                <div id="one2">
                    <p></p>口碑统计
                </div>
                <div id="one3">
                    <p></p>就业统计
                </div>
                <div id="one4">
                    <p></p>就业率统计
                </div>
            </div>
            <li class="chuxian" id="four">
                <p></p><span class="icon iconfont icon-icon-test"></span>提醒功能
            </li>
        </ul>
        <div id="top">
            <div class="right">
                <span>量子矩阵</span><span>退出</span>
            </div>
        </div>
        <iframe src="./homepage.html" frameborder="0"></iframe>
    </div>
</body>
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/url.js"></script>
<script>
    $(function () {
        $.ajax({
            url: SetUrl.conUrl,
            type: 'POST',
            dataType: 'json',
            data: {
                username: localStorage.getItem("name"),
                password: localStorage.getItem("pass")
            },
            success: function (data) {
                if (data.code == 100) {
                    console.log(data)
                    localStorage.setItem("empId", data.result[0].empId);
                    console.log(localStorage.getItem("empId"));
                    var list = data.result;
                    for (var k = 0; k < list.length; k++) {
                        $('.chuxian').each(
                            function (i, e) {
                                if (list[k].moduleName == $(e).text().trim()) {
                                    $(e).css('display', 'block')
                                }
                            }
                        );
                    }
                } else {
                    alert('账号或密码错误');
                }
            },
            error: function (xhr, errorInfo) {
                console.log(errorInfo);
            }
        })
    })
    $('ul li').click(function () {
        $(this).css({
            background: '#3c9688',
            color: '#fff'
        }),
            $(this).siblings().css({
                background: '',
                color: ''
            }),
            $('#bottom div').css({
                background: '',
                color: ''
            })
    })
    $('#a0').click(function () {
        $(this).css({
            background: '',
            color: ''
        }),
            $(this).siblings().css({
                background: '',
                color: ''
            }),
            $('#bottom div').css({
                background: '',
                color: ''
            })
            location.href = '08-Amy-con.html';
    })
    $('#midle').click(function () {
        $(this).css({
            background: '',
            color: ''
        }),
            $(this).siblings().css({
                background: '',
                color: ''
            }),
            $('#bottom div').css({
                background: '',
                color: ''
            })
    })
    var onOff = true;
    $('#midle').click(function () {
        if (onOff) {
            onOff = false;
            $('#midle').find('i').removeClass('layui-icon layui-icon-down');
            $('#midle').find('i').addClass("layui-icon layui-icon-up");
            $('#bottom').css('display', 'block')
        } else {
            onOff = true;
            $('#midle').find('i').removeClass('layui-icon layui-icon-up');
            $('#midle').find('i').addClass("layui-icon layui-icon-down");
            $("#bottom").css('display', 'none')
            $('#bottom div').css({
                background: '',
                color: ''
            })
        }
    })
    $('#bottom div').click(function () {
        $(this).css({
            background: '#3c9688',
            color: '#fff'
        })
        $('ul li').css({
            background: '',
            color: ''
        })
        $(this).siblings().css({
            background: '',
            color: ''
        })
    })
    $('#one').click(function () {
        $('iframe').attr('src', './homepage.html')
    })
    $('#two').click(function () {
        $('iframe').attr('src', './BX_schoolManage.html')
    })
    $('#three').click(function () {
        $('iframe').attr('src', './XL_QuotaManagement.html')
    })
    $('#midle').click(function () {
        $('iframe').attr('src', './01-Amy-market.html')
    })
    $('#four').click(function () {
        $('iframe').attr('src', './XL_remind.html')
    })
    $('#five').click(function () {
        $('iframe').attr('src', './07-Amy-student.html')
    })

    $('#one1').click(function () {
        $('iframe').attr('src', './01-Amy-market.html')
    })
    $('#one2').click(function () {
        $('iframe').attr('src', './02-Amy-koubei.html')
    })
    $('#one3').click(function () {
        $('iframe').attr('src', './03-Amy-jiuye.html')
    })
    $('#one4').click(function () {
        $('iframe').attr('src', './04-Amy-jiuyelv.html')
    })
    $('#top span:last-of-type').click(function () {
        location.href = "./05-Amy-denglu.html";
    })
    $('li').on('mouseover', function () {
        $(this).find('p').css('display', 'block');
        $('li').on('mouseout', function () {
            $(this).find('p').css('display', 'none');
        })
    })
    $('#bottom div').on('mouseover', function () {
        $(this).find('p').css('display', 'block');
        $('#bottom div').on('mouseout', function () {
            $(this).find('p').css('display', 'none');
        })
    })
</script>

</html>